<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<% String basePath = request.getContextPath();%>
<% String baseCSSPath = request.getContextPath()+"/resources/css";%>
<% String baseJSPath = request.getContextPath()+"/resources/js";%>
<% String baseImagePath = request.getContextPath()+"/resources/images";%>

<title>Register Account</title>

<link href="<%=baseImagePath%>/favicon.png" rel="icon">
<link href="<%=baseCSSPath%>/stylesheet.css" rel="stylesheet" type="text/css" >
<script src="<%=baseJSPath %>/jquery-1.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/jquery_004.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/script.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/common.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/jquery.validate.min.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/jquery.validate.message.js" type="text/javascript" ></script>

<script language="javascript">

$(document).ready(function() {
	
	$("#registerSubmitButton").click(function() {
		$("#register").submit();
	});
	
	
	jQuery.validator.addMethod("checkUserNameAvailability", function(value, element, params) { 
	    var validator = this;
	    var username = $('#username').val();
	    var result = false;
	    
	    $.ajax({
	 	   type: "POST",
	 	   url: "account/checkUserNameAvailability.html",
	 	   data: "username=" + username,
	 	   async: false, 
	 	   success: function(response){
	 		   
	 	       if (response == 'true'){ 
	 	    	   result = true;
	 	        }
	 	   },
	 	   error: function(e){
	 		   //console.debug(e);
	 	  		alert('Error: ' + e);
	 	   }
	    });
	    return result;
	}, 'Username has been taken');

	
	$("#register").validate({
		rules: {
			  username: { 
                required: true,
                checkUserNameAvailability: true
          	  },
	          password: { 
	                required: true, minlength: 6
	          }, 
	          conformPassword: { 
	                required: true, equalTo: "#password", minlength: 6
	          },
	          readmeCheckbox: { 
	                required: true 
	          }
	          
		}
	});

	
});



// function doAjaxPost() {
//    var username = $('#username').val();
//    $.ajax({
// 	   type: "POST",
// 	   url: "/account/checkUserNameAvailability.html",
// 	   data: "username=" + name,
// 	   success: function(response){
// 	       alert(response);
// 		   $('#info').html(response);
// 		   $('#name').val('');
// 		   $('#education').val('');
// 	   },
// 	   error: function(e){
// 	  		alert('Error: ' + e);
// 	   }
//    });
// }

</script>

</head>
<body class="account-register">
	<div class="main-shining">
		
<p style="display: none;" id="back-top"> <a href="#top"><span></span></a> </p>
<div class="row-1">
   	<%@ include file="header.jsp" %>
   </div>
<div id="container">
<div id="notification"> </div>
<div id="column-left">
	<%@ include file="navMenu.jsp" %>
</div>   
 
<div id="content">  <div class="breadcrumb">
       <a href="home.html" >首页</a>
          » <a href="account.html" >我的帐号</a>
          » <a class="last" >登录</a>
      </div>
  <h1>用户注册</h1>
  
  <div class="box-container">
  <p>如果您已经是注册用户，请点击<a href="account/login.html" style="color:#f84812">这里登录</a>.</p>
      
      
      
      <form:form method="post" modelAttribute="user" action="account/registerSubmit.html" id="register" >
        <h2>您的个人信息 :  (<span class="required">*</span> 是必填选项)</h2>
        <font color=red><form:errors path="*" /></font>
        <div class="content">
          <table class="form">      
            <tbody><tr>
              <td><span class="required" >*</span> 用户名称:</td>
              <td>
              <form:input id="username" path="username" class="required" style="width:300px;"/>
<!--               <a id="checkUserNameButton" class="button"><span>Check Availability</span></a> -->
                </td>
            </tr>
            <tr>
              <td><span class="required">*</span> 用户密码:</td>
              <td><form:password id="password" path="password"  style="width:300px;" />
                </td>
            </tr>
            <tr>
              <td><span class="required">*</span> 密码确认:</td>
              <td><form:password id="conformPassword" path="conformPassword" style="width:300px;" /> 
                </td>
            </tr>
            <tr>
              <td><span class="required">*</span> 电子邮件:</td>
              <td><form:input path="email" class="required email" style="width:300px;" /> 
                </td>
            </tr>
            <tr>
              <td> &nbsp;&nbsp; 电话号码:</td>
              <td><form:input path="telephone" style="width:300px;" />  
                </td>
            </tr>
            
          </tbody></table>
        </div>
        
        <div class="buttons">
          <div class="left">我已经同意 <a class="colorbox cboxElement" href="" onclick="window.open('privacyPolicy.jsp');" alt="Privacy Policy"><b>隐私策略</b></a> 
                 <input name="agree" value="1" type="checkbox" id="readmeCheckbox" class="required" /><br/><br/>
                        
          </div>
          <div class="right"><a id="registerSubmitButton" class="button"><span>提交</span></a></div>
        </div>
             </form:form>
  </div>
  </div>
    
 
</div>
<div class="footer-wrap">
 	<%@ include file="footer.jsp" %>
</div>
 

</div>

</body></html>